<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="/JS/china.js"></script>

</head>
<body >
<div id="box" style="width: 700px; height: 300px;"></div>
<script>
    // 初始化echarts实例
    var myEcharts = echarts.init(document.getElementById("box"));
    var nus = [];
    $.ajax({
        async: true,            //异步请求
        data: {},
        //请求方式get
        type: "GET",
        //请求地址
        url: "/count/count5",
        //数据，json字符串
        dataType: "json",
        //请求成功
        success: function (result) {
            $.each(result, function (index, item) {
                nus.push({
                    name: item.word,
                    value: item.count
                });
            });

    var option = {
        title: {  //标题样式
            text: '全国消费水平分布',
            x: "center",
            textStyle: {
                fontSize: 18,
                color: "cornsilk"
            },
        },
        tooltip: {  //这里设置提示框
            trigger: 'item',  //数据项图形触发
            backgroundColor: "red",  //提示框浮层的背景颜色。
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            formatter: '地区：{b}<br/>模拟数据：{c}'
        },
        visualMap: {//视觉映射组件
            top: 'center',
            left: '10%',
            reight:"5%",
            min: 1,
            max: 80,
            text: ['High', 'Low'],
            realtime: false,  //拖拽时，是否实时更新
            calculable: true,  //是否显示拖拽用的手柄
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            },
        },
        series: [
            {
                name: '模拟数据',
                type: 'map',
                mapType: 'china',
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle: {//地图区域的多边形 图形样式
                    normal: {//是图形在默认状态下的样式
                        label: {
                            show: true,//是否显示标签
                            textStyle: {
                                color: "black"
                            }
                        }
                    },
                    zoom: 1.5,  //地图缩放比例,默认为1
                    emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label: { show: true }
                    }
                },
                data:nus
            }
        ]
    };  myEcharts.setOption(option); }});
    // 使用刚指定的配置项和数据显示图表。

</script>
</body>
